<!--
 轮盘抽奖组件，带中奖弹框
 @Author: mosowe
 @Date:2023-03-16 16:00:17
-->

<template>
  <view class="zo-lottery-draw-circle">
    <!-- 弹框形式 -->
    <template v-if="dialog">
      <ZoPopup
        simple
        ref="drawTablePopupRef">
        <RoundTable
          ref="roundTableRef"
          :areaNumber="props.areaNumber"
          :bgImage="props.bgImage"
          @start="start"
          @success="success"></RoundTable>
      </ZoPopup>
    </template>
    <!-- 一般页面形式 -->
    <template v-else>
      <RoundTable
        ref="roundTableRef"
        :areaNumber="props.areaNumber"
        :bgImage="props.bgImage"
        @start="start"
        @success="success"></RoundTable>
    </template>
    <!-- 中奖弹框 -->
    <ZoPopup
      simple
      ref="drawSuccessRef"
      @close="drawSuccessClose">
      <view
        v-if="awardData"
        class="draw-success-wrap">
        <view class="title">恭喜您抽中</view>
        <view class="prize">
          {{ awardData.content }}
        </view>
        <image
          :src="awardData.type === 1 ? coinImage : ticketImage"
          class="image"></image>
        <view
          class="linear-yellow-tb-btn"
          @click="closeDrawSuccessPopup">
          {{ props.successBtnText }}
        </view>
      </view>
    </ZoPopup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
// import { getDrawData } from '@/api/common';
import RoundTable from './roundTable.vue';
import coinImage from './draw-success-coin.png';
import ticketImage from './draw-success-ticket.png';
import bgImage from './default-draw-bg.png';

interface PropsType {
  areaNumber?: number; // 奖品分区
  bgImage?: string; // 轮盘背景图
  query?: any; // 抽奖时的额外参数
  successBtnText?: string; // 中奖弹框按钮文案
  dialog?: boolean; // 转盘弹框形式
}

const props = withDefaults(defineProps<PropsType>(), {
  areaNumber: 12,
  bgImage: bgImage,
  query: {},
  successBtnText: '好的',
  dialog: false
});

// emits
interface EmitsType {
  (e: 'success'): void; // 中奖时
  (e: 'successClose'): void; // 关闭中奖弹框时
  (e: 'over'): void; // 抽奖次数用完时
}
const emits = defineEmits<EmitsType>();

// 转盘抽奖
const drawTablePopupRef = ref<POPUP_TYPE | null>(null);
const drawTimes = ref(1); // 抽奖次数，默认一次
const awardData = ref<any>(null); // 得奖内容，接口需返回：中奖内容string，中奖类型number 1币2券，中奖序号（转盘分区序号，1开始），剩余抽奖次数（默认1）
const roundTableRef = ref<any>(null); // 转盘ref
// 开始抽奖
const start = () => {
  if (drawTimes.value <= 0) {
    emits('over');
    uni.showToast({
      title: '抽奖次数已用完',
      icon: 'none'
    });
    return;
  }
  drawTimes.value--;
  uni.showLoading({
    title: '',
    mask: true
  });
  // getDrawData(props.query) // 这里接口
  // .then(res=>{})
  // 模拟接口
  setTimeout(() => {
    uni.hideLoading();
    awardData.value = {
      content: '恭喜你获得99小熊币',
      type: Math.floor(Math.random() * 2), // 1币2券
      num: 1, // 抽奖次数
      index: Math.floor(Math.random() * 12 + 1) //前端随机数，这里应该后台返回中奖结果
    };
    // drawTimes.value = awardData.value.num; // 每次抽完查询剩余次数，接口没有的话就默认1次，这行代码就不用了
    roundTableRef.value?.begin(awardData.value.index);
  }, 1000);
};

// 结果展示
const drawSuccessRef = ref<POPUP_TYPE | null>(null);
const success = () => {
  if (drawTimes.value <= 0) {
    // 抽奖次数没有了
    emits('over');
  } else {
    emits('success');
  }
  if (awardData.value) {
    // 中奖，打开中奖弹框
    drawSuccessRef.value?.open();
  } else {
    // 未中奖
    uni.showToast({
      title: '很遗憾，未中奖',
      icon: 'none'
    });
  }
};

// 关闭中奖弹框--弹框内按钮事件
const closeDrawSuccessPopup = () => {
  emits('successClose');
  drawSuccessRef.value?.close();
};
// 关闭中奖弹框--弹框组件的close事件
const drawSuccessClose = () => {
  emits('successClose');
};

// 打开弹框轮盘
const openPopupTable = () => {
  drawTablePopupRef.value?.open();
};

// 关闭弹框轮盘
const closePopupTable = () => {
  drawTablePopupRef.value?.close();
};

defineExpose({
  openPopupTable,
  closePopupTable
});
</script>

<style lang="scss" scoped>
.zo-lottery-draw-circle {
  .draw-success-wrap {
    width: 610rpx;
    height: 640rpx;
    background: linear-gradient(180deg, #fef2dcff 0%, #fef4ebff 50%, #ffefd5ff 100%);
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    text-align: center;
    .linear-yellow-tb-btn {
      margin: 50rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
    }
    .image {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 480rpx;
    }
    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #803e12;
      margin: 50rpx 0 10rpx 0;
    }
    .prize {
      font-size: 36rpx;
      color: #ca5302;
      font-weight: bold;
    }
  }
  // 渐变背景上到下-黄色系-按钮
  .linear-yellow-tb-btn {
    background: linear-gradient(180deg, #fefefeff 0%, #fefccdff 0%, #fbc66cff 89%, #efaa52ff 100%);
    color: #803e12;
    text-align: center;
    line-height: 88rpx;
    height: 88rpx;
    border-radius: 50rpx;
    font-weight: bold;
  }
}
</style>
